<template>
  <div class="box">
    <div class="container">
      <div class="news-list">
        <div class="list-left">
          <div style="display:flex;align-items: center">
            <svg class="icon-third" aria-hidden="true" style="font-size: 8px">
              <use xlink:href="#icon-third-xinjianjingjia"></use>
            </svg>
            <span style="margin-left: 10px;font-size: 22px;">{{ formData?.title }}</span>
          </div>
          <Typography>
            <TypographyParagraph>
              {{ formData?.remark }}
            </TypographyParagraph>
          </Typography>
          <a-divider />
          <FreePractice :item="freePracticeItems" :repositoryId="repositoryId" />
          <QuestionTypePractice :item="qtPracticeItems" style="margin-top: 50px"
                                :repositoryId="repositoryId" />
        </div>
        <div class="list-right">
          <RecentPractice :repositoryId="repositoryId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import FreePractice from "@/components/practice/mode/components/FreePractice.vue";
import QuestionTypePractice from "@/components/practice/mode/components/QuestionTypePractice.vue";
import RecentPractice from "@/components/practice/mode/components/RecentPractice.vue";
import { apiGetRepositoryById } from "@/api/practice";
import { useRoute } from "vue-router";
import { Typography, TypographyParagraph } from "ant-design-vue";

const freePracticeItems = reactive<any>(
  {
    "id": 1,
    "title": "自由练习",
    "columnsDetails": [
      {
        "image": "#icon-third-ziyoujiedian",
        "title": "顺序练习",
        "mode": 1
      },
      {
        "image": "#icon-third-nowsink",
        "title": "随机练习",
        "mode": 2
      }
    ]
  }
);
const qtPracticeItems = reactive<any>(
  {
    "id": 2,
    "title": "题型练习",
    "mode": 3,
    "columnsDetails": [
      {
        "image": "#icon-third-hetongyouxiao",
        "title": "单选题",
        "type": 1,
        "description": "",
        "num": 0
      },
      {
        "image": "#icon-third-icon-test",
        "title": "多选题",
        "type": 2,
        "description": "",
        "num": 0
      },
      {
        "image": "#icon-third-light-component-dataconvert-deletcharacter",
        "title": "判断题",
        "type": 3,
        "description": "",
        "num": 0
      },
      {
        "image": "#icon-third-shangye-",
        "title": "填空题",
        "type": 5,
        "description": "",
        "num": 0
      }
    ]
  }
);

const formData = ref<any>();
const route = useRoute();
const repositoryId: any = route.params?.id ?? -1;

async function initFormData() {
  const data: any = await apiGetRepositoryById(repositoryId);
  formData.value = { ...data.result };
  qtPracticeItems.columnsDetails.forEach((item) => {
    let questionDTO = formData.value?.questionDTOList.filter(val => val.type == item.type)[0];
    if (questionDTO) {
      item.description = questionDTO.num + "道";
      item.num = questionDTO.num;
    } else {
      item.description = "0道";
      item.num = 0;
    }
  });
}

initFormData();
</script>

<style lang="less" scoped>
.box {
  padding-top: 20px;
  height: 91vh;
  overflow:auto;
  min-height:610px;
}

.container {
  max-width: 1200px;
  min-height: 580px;
  margin: 0 auto;

  .list-left {
    width: 860px;
  }
}


.news-list {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.list-right {
  /* margin-left: 50px;
   width: 20%;*/
  display: flex;
  //align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  min-height: 580px;


  p {
    white-space: nowrap;
    position: relative;
    //right: -30px;
  }
}
</style>
